<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eCNY Token DApp</title>
    <link rel="stylesheet" href="wallet.css">
    <script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/ethers/dist/ethers.umd.min.js"></script> 
    <script src="wallet.js" defer></script>
</head>
<body>
    <h1>eCNY Token DApp</h1>
    <div class="section">
        <h2>我的钱包信息</h2>
        <div class="wallet-info">
            <p><strong>我的钱包地址:</strong> <span id="walletAddress">加载中...</span></p>
            <p><strong>ETH 余额:</strong> <span id="ethBalanceDisplay">余额: 0 ETH</span></p>
        </div>
    </div>

    <div class="section">
        <h2>代币交易</h2>
        <div class="buy-sell-section">
            <div class="buy-section">
                <h3>购买 eCNY 代币</h3>
                <input type="text" id="buyAmount" placeholder="输入ETH金额" />
                <button id="buyButton">购买</button>
            </div>
            <div class="sell-section">
                <h3>出售 eCNY 代币</h3>
                <input type="text" id="sellAmount" placeholder="输入代币数量" />
                <button id="sellButton">出售</button>
            </div>
        </div>
        <h3>代币余额</h3>
        <p id="balanceDisplay"></p>
    </div>

    <div class="section">
        <h2>批量操作</h2>
        <div class="batch-section">
            <h3>批量转账 eCNY 代币</h3>
            <textarea id="recipients" placeholder="输入接收者地址（以逗号分隔）"></textarea>
            <textarea id="amounts" placeholder="输入相应的金额（以逗号分隔）"></textarea>
            <button id="batchTransferButton">批量转账</button>
        </div>
        <div class="batch-eth-section">
            <h3>批量转账 ETH</h3>
            <textarea id="ethRecipients" placeholder="输入接收者地址（以逗号分隔）"></textarea>
            <textarea id="ethAmounts" placeholder="输入相应的金额（以 ETH 计，逗号分隔）"></textarea>
            <button id="batchETHTransferButton">批量转账</button>
            <div id="transferResult">
                <p><strong>总转账金额:</strong> <span id="totalAmount">0 ETH</span></p>
                <p><strong>预计 Gas 费用:</strong> <span id="estimatedGasFee">0 ETH</span></p>
            </div>
        </div>
    </div>    

    <div class="section">
        <h2>交易明细</h2>
        <button id="checkTransactionsButton">查看交易明细</button>
        <div id="transactionsDisplay"></div>
    </div>

    <div id="transactionModal" class="modal">
        <div class="modal-content" id="modalContent">
            <!-- 动态内容会插入到这里 -->
        </div>
        <button id="closeModal" class="close-button">关闭</button>
    </div>
</body>
</html>